<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>1.7 CSS背后的理念</title>
    <style>
        body {
            background: black;
            color: white;
        }

        footer {
            color: red;
        }

        footer span {
            color: green;
        }
    </style>
</head>
<body>
<span>
    <h5>层叠样式表</h5>
    层叠样式表(Cascading Style Sheet,CSS)这个名称是有来由的。想像瀑布落下的激流冲击着石头，石头一层一层地被浸湿。<br>
    与之类似，每个子元素的CSS样式都继承于已应用在其父元素上的样式。
</span>
<span>
    <h5>文档对象模型</h5>
    文档对象模型(Document Object Model,DOM)的层级体现了网站结构
</span>
<br>
<span>---------------------------------------------</span>
<br>
<span>该样式会在父层次结构中“层叠”，使以下所有 HTML 元素都继承“在黑色背景下显示白色文本”的样式。</span>
<header>Website header</header>
<article>Amazing article.</article>
<footer>
    Privacy Policy.
    <span>2021 Copyright.</span>
</footer>
<span>
    如果想单独显示页脚并以红色突出显示 Privacy Policy.，以绿色突出显示 2021 Copyright.，那么可以应用以下 CSS 命令进一步扩展层叠原则。
    <pre>
        body {background: black; color: white;}
        footer {color: red;}
        footer span {color: green;}
    </pre>
</span>
</body>
</html>